<template>
  <div class="textMore">
    <span class="el-icon-picture uploadimg" @click="uploadimg"></span>
    <div ref="editor" id="div1" style="text-align:left;"></div>
    <input
      style="display: none"
      id="inputId"
      ref="input"
      type="file"
      accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
      multiple="multiple"
      @change="handleFileChange"
    />
  </div>
</template>

<script>
import $ from "jquery";
import E from "wangeditor";

import configJson from "../../api/config";
export default {
  name: "editor",
  data() {
    return {
      editorContent: "",
      editor: "",
      path: ""
    };
  },
  methods: {
    getContent: function() {
      return this.editorContent;
    },
    // 设置内容
    setContent: function(text) {
      this.editor.txt.html(`${text}`);
    },
    // 获取内容
    getUptext() {
      return this.editor.txt.html();
    },
    uploadimg() {
      this.$refs.input.click();
    },
    handleFileChange(e) {
      let file = e.target.files[0];
      let formData = new FormData(); // 创建一个form类型的数据
      formData.append("file", file);
      let text = `${configJson.API_URL}fileController/uploadFile`;
      let _this = this;
      $.ajax({
        url: text,
        type: "POST",
        async: false,
        processData: false, // 将数据转换成对象，不对数据做处理，故 processData: false
        contentType: false, // 不设置数据类型
        data: formData,
        success: function(data) {
          console.log(data);
          let url = `${configJson.API_URL}/fileController/${data.data}`;
          _this.editor.cmd.do(
            "insertHTML",
            '<img src="' +
              url +
              '" alt="" width="60%" height="auto" style="display: block;margin: 0 auto;">'
          );
        },
        error: function(data) {}
      });
    }
  },
  computed: {},
  mounted() {
    this.editor = new E(this.$refs.editor);
    this.editor.customConfig.onchange = html => {
      this.editorContent = html;
    };
    this.editor.customConfig.menus = [
      "head",
      "bold",
      "italic",
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "table" // 表格
    ];
    this.editor.customConfig.zIndex = 10;
    this.editor.customConfig.uploadImgShowBase64 = true;
    this.editor.customConfig.showLinkImg = false;
    this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024;
    this.editor.create();
  }
};
</script>

<style scoped>
.textMore {
  position: relative;
}
.uploadimg {
  position: absolute;
  color: rgb(153, 153, 153);
  font-size: 20px;
  top: 6px;
  left: 380px;
}
</style>
<style>
.w-e-text-container {
  height: 700px !important; /*!important是重点，因为原div是行内样式设置的高度300px*/
}
</style>
